<template>
  <div class="homepage">
	  <!-- 固定标题栏 -->
    <div class="nav-fd">
		<div class="get-App ">
			下载App
		</div>
		<div class="serch-logo ">
			<van-icon name="search" size="0.775rem" />
		</div>
	</div>
	<!-- 轮播 -->
	<div class="lb">
		<van-swipe :autoplay="3000" :show-indicators='false'>
		  <van-swipe-item v-for="(image, index) in info" :key="index" class='lbmodular'>
		   <img v-lazy="image" class="lbimg" />
		  </van-swipe-item>
		</van-swipe>
	</div>
	<!-- 新歌推荐 -->
	<div class="ns-recommend">
		<div class="ns-title ">
				<span class="ns-font fl-le">新歌推荐</span>
				<span class="ns-more fl-ri">
					更多
					<i class="ns-icon"></i>
				</span>
		</div>
		<div class="ns-content">
			<div class="ns-modular">
				<div class="ns-tab">
					<div class='ns-tabmore'>
						<div class="content">
							<div class="content-fi">
								<img :src="nsimg1" alt="">
							</div>
							<div class="content-se">
								<span>{{nsname1}}</span>
								<span>{{nsname11}}</span>
							</div>
							<div class="content-th">
								<van-icon name="play" />
							</div>
						</div>
						
						<div class="content">
							<div class="content-fi">
								<img :src="nsimg2" alt="">
							</div>
							<div class="content-se">
								<span>{{nsname2}}</span>
								<span>{{nsname21}}</span>
							</div>
							<div class="content-th">
								<van-icon name="play" />
							</div>
						</div>
						<div class="content">
							<div class="content-fi">
								<img :src="nsimg3" alt="">
							</div>
							<div class="content-se">
								<span>{{nsname3}}</span>
								<span>{{nsname31}}</span>
							</div>
							<div class="content-th">
								<van-icon name="play" />
							</div>
						</div>
					</div>
					
					<div class='ns-tabmore'>
						<div class="content">
							<div class="content-fi">
								<img :src="nsimg4" alt="">
							</div>
							<div class="content-se">
								<span>{{nsname4}}</span>
								<span>{{nsname41}}</span>
							</div>
							<div class="content-th">
								<van-icon name="play" />
							</div>
						</div>
						<div class="content">
							<div class="content-fi">
								<img :src="nsimg5" alt="">
							</div>
							<div class="content-se">
								<span>{{nsname1}}</span>
								<span>{{nsname51}}</span>
							</div>
							<div class="content-th">
								<van-icon name="play" />
							</div>
						</div>
						<div class="content">
							<div class="content-fi">
								<img :src="nsimg6" alt="">
							</div>
							<div class="content-se">
								<span>{{nsname1}}</span>
								<span>{{nsname61}}</span>
							</div>
							<div class="content-th">
								<van-icon name="play" />
							</div>
						</div>
					</div>
					<div class='ns-tabmore'>
						<div class="content">
							<div class="content-fi">
								<img :src="nsimg7" alt="">
							</div>
							<div class="content-se">
								<span>{{nsname1}}</span>
								<span>{{nsname71}}</span>
							</div>
							<div class="content-th">
								<van-icon name="play" />
							</div>
						</div>
						<div class="content">
							<div class="content-fi">
								<img :src="nsimg8" alt="">
							</div>
							<div class="content-se">
								<span>{{nsname1}}</span>
								<span>{{nsname81}}</span>
							</div>
							<div class="content-th">
								<van-icon name="play" />
							</div>
						</div>
						<div class="content">
							<div class="content-fi">
								<img :src="nsimg9" alt="">
							</div>
							<div class="content-se">
								<span>{{nsname1}}</span>
								<span>{{nsname91}}</span>
							</div>
							<div class="content-th">
								<van-icon name="play" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 播放器 -->
	<div class="musicpaly">
		<div class="palyfont">暂无歌曲播放</div>
		<div class="palybutton">
			<i class="suspend buttonimg "></i>
			<i class="nextmusic buttonimg "></i>
		</div>
	</div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Lazyload } from 'vant';
	
Vue.use(Lazyload);
export default {
	data(){
		return{
			info: [
				require('../assets/img/homepage/ChAKEl-8aeeAEbGFAAILBuk1sBk287.jpg'),
				require('../assets/img/homepage/ChAKEl-7GZWAFEvnAAFYd6yYEdI070.jpg'),
				require('../assets/img/homepage/ChAKEl-7LFSAK_JVAAEo8sZOfk8097.jpg'),
				require('../assets/img/homepage/ChAKEV-3MC2AGJyGAAL7FPJYTr0299.jpg'),
				require('../assets/img/homepage/ChAKEl-3lQ6AaejjAAEUQKPVE0c700.jpg'),
				require('../assets/img/homepage/ChAKEl-12m2AIltoAADctrpDvmA542.jpg'),
				require('../assets/img/homepage/ChAKEl-3bPuAY9gRAADEdbhUby8954.jpg'),
				require('../assets/img/homepage/ChAKEV-8Z6eAHf1mAAD4gS1cuJU224.jpg'),
			      ],
				  nsimg1:require('../assets/img/homepage/ChAKEl-s4xSAWltTAFvj_vh0Tz0573.jpg'),
				  nsimg2:require('../assets/img/homepage/ChAKEl-WpfSAQwpbACvHHx_Sm1k685.jpg'),
				  nsimg3:require('../assets/img/homepage/ChAKEV-s0WCAdkp4AALf1cydLPs783.jpg'),
				  nsimg4:require('../assets/img/homepage/ChAKEV-St0WAC99HACNoLm__-Ow604.jpg'),
				  nsimg5:require('../assets/img/homepage/ChAKEV-s2sSADdIlAD6vNSPhUqc558.jpg'),
				  nsimg6:require('../assets/img/homepage/ChAKEV-aczGATO-EACK2cum6N_c211.jpg'),
				  nsimg7:require('../assets/img/homepage/ChAKEV-SeWGAPA1EAAsHjUOwQ3M039.jpg'),
				  nsimg8:require('../assets/img/homepage/ChAKEV-RYpmAKYpZAHFmtqv3CBs231.jpg'),
				  nsimg9:require('../assets/img/homepage/ChAKEV-lGd2AYnuSAG_QYIpOpoo129.jpg'),
				  nsname1:'爱情听说过没见过',
				  nsname2:'别再想见我',
				  nsname3:'Here Comes The Gangster',
				  nsname4:'我是歌星',
				  nsname5:'三十余年',
				  nsname6:'Going Home',
				  nsname7:'Moma',
				  nsname8:'Dance By Myself (Retro Rock Band Ver.)',
				  nsname9:'Wonder',
				  nsname11:'高安',
				  nsname21:'许光汉',
				  nsname31:'Berlin Psycho Nurses柏林护士',
				  nsname41:'黄威尔Will Ng',
				  nsname51:'侯吉祥',
				  nsname61:'Yider（伊德尔）',
				  nsname71:'BowAsWell',
				  nsname81:'뉴튼',
				  nsname91:'简爱/李宜玲',
		}
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.dp-fl{
	display: flex;
	justify-content: center;
}
.fl-le{
	float: left;
}
.fl-ri{
	float: right;
}
.nav-fd{
	position: fixed!important;
	background: url(../assets/img/homepage/df8724c.jpg) no-repeat;
	width: 100%;
	height: 21.74vw;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	z-index: 200;
}
.get-App{
	padding: 0.2rem 0.175rem;
	width: 1.7rem;
	text-align: center;
	background: #e61723;
	color: #fafafa;
	font-style: normal;
}
.serch-logo{
	padding: .65rem;
}
.pd-le{
	padding-left: 0.625rem;
}
.lb{
	padding-top: 2.15rem;
	height: 6rem;
}
.lbmodular{
	padding-left: 0.3rem;
}
.lbimg{
	width: 9.43rem;
	box-shadow: 0 4px 6px #bbb;
}
.ns-recommend{
	width: 100%;
	height: 6.25rem;
	
}
.ns-title{
	width: 100%;
	height: 1.25rem;
	line-height: 1.25rem;
	padding: 0 .65rem;
}
.ns-font{
	font-size: 20px;
	font-weight: 700;
}
.ns-content{
	position: relative;
	background: #CCCCCC;
	/* height: 5rem; */
}
.ns-modular{
	height: 6.2rem;
	overflow: hidden;
}
.ns-tab{
	padding-right: 8px;
	padding-left: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	box-sizing: content-box;
	height: 100%;
	padding-bottom: 15px;
	position: relative;
	display: flex;
	background-color: #fff;
	user-select: none;
}
.ns-tabmore{
	flex: 1 0 auto;
	padding: 0 12px;
	position: relative;
	display: flex;
	/* align-items: center;
	justify-content: center; */
	box-sizing: border-box;
	font-size: 14px;
	line-height: 20px;
	cursor: pointer;
	width: 7.25rem;
	flex-direction: column;
	margin-right: 1.25rem;
}
.content{
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 2.7rem;
	zoom: .6;
}
.content-fi img{
	width: 70%;
}
.content-se{
	width: 100%;
	display: flex;
	flex-direction: column;
}
.content-se span{
	font-size: .5rem;
}
.content-th{
	zoom: 2;
	width: 0rem;
}
.musicpaly{
	width: 100%;
	height: 1.25rem;
	display: flex !important;
	bottom: 0;
	position: absolute;
	line-height: 1.25rem;
	padding: 0 .65rem;
}
.palybutton{
	margin-left: 4.25rem;
}
.suspend{
	background: url(../assets/img/homepage/sthop.png) no-repeat;
}
.nextmusic{
	background: url(../assets/img/homepage/nextmusic.png) no-repeat;
}
.buttonimg{
	display: inline-block;
	width: 27px;
	height: 27px;
	vertical-align: middle;
	background-size: 100%;
	margin-left: 20px;
}
</style>
